<template>
  <view class="wrap">
    <view class="tip">你准备好做题了吗？</view>
    <uni-section title="请选择题数" type="line">
      <uni-data-select :localdata="range" @change="change"></uni-data-select>
    </uni-section>
    <button @click="handleClick" style="margin-top: 30rpx" class="btn">
      开始做题
    </button>
    <!-- 提示窗示例 -->
    <uni-popup ref="alertDialog" type="dialog">
      <uni-popup-dialog
        :type="msgType"
        cancelText="还没有"
        confirmText="准备好了"
        content="你真的准备好了吗？"
        @confirm="dialogConfirm"
        @close="dialogClose"
      ></uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
let alertDialog = ref();
let value = ref();
let range = reactive([
  { value: 0, text: "2道题" },
  { value: 1, text: "4道题" },
  { value: 2, text: "6道题" },
  { value: 3, text: "全部题" },
]);
let msgType = ref("success");
const handleClick = () => {
  alertDialog.value.open();
  msgType.value = "success";
  console.log("123");
};
const dialogConfirm = () => {
  console.log("点击确认");
  uni.navigateTo({
    url: `/pages/make/index?num=${value.value}`,
  });
};

const dialogClose = () => {
  console.log("点击关闭");
};

const change = (e: any) => {
  console.log("e:", e);
  value.value = e;
};
</script>

<style lang="scss">
.wrap {
  width: 70%;
  margin-top: -200rpx;
}
page {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tip {
  margin: 30rpx 0;
  font-size: 40rpx;
  font-weight: 700;
}
.btn {
  width: 70%;
  background-color: pink;
  color: #fff;
}
</style>
